<template>
  <tr>
    <td class="agent">{{one.agentName}}</td>
    <td>{{one.agentNo}}</td>
    <td>{{filterVersion(one.version)}}</td>
    <td>{{one.answerStyle}}</td>
    <td class="cdr-status-self" :class="one.state ? one.state.color : ''">{{one.state ? one.state.content: ''}}</td>
    <td v-for="(item, index) in monitorHeader" v-show="item.show === true" :key="index">
        <el-popover trigger="hover" placement="top" v-if="item.name === 'sensitiveWord'">
          <p style="text-align:left" v-html='one[item.name]'></p>
          <div slot="reference" class="name-wrapper">
            <p size="medium" style='color:#2878FF;width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;' v-show="one['sensitiveAgent']">座席：{{one['sensitiveAgent']}}</p>
            <p size="medium" style='color:#2878FF;width: 80px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;' v-show="one['sensitiveCustomer']">客户：{{one['sensitiveCustomer']}}</p>
          </div>
        </el-popover>
       <span v-else>{{one[item.name]}}</span>
    </td>
    <td class="operate" style="overflow: visible;">
      <el-button type="text" size="small" icon="el-icon-more"></el-button>
      <div class="button-group">
        <el-button size="mini" type="text" @click="ctiUiListen(one.operate)" class="listen" :disabled="one.operate.buttonState.listen.disabled" v-show="one.operate.buttonState.listen.show">{{$t('monitor.monitor')}}</el-button>
        <el-button size="mini" type="text" @click="ctiUiEndListen(one.operate)" class="endListen"  v-show="!one.operate.buttonState.listen.show">{{$t('monitor.endMonitor')}}</el-button> <br>
        <el-button size="mini" type="text" @click="ctiUiForceHangup(one.operate)" class="forceHangup" :disabled="one.operate.buttonState.forceHangup.disabled" v-show="one.operate.buttonState.forceHangup.show">{{$t('monitor.demolitions')}}</el-button>  <br>
        <el-button size="mini" type="text" @click="ctiUiLoot(one.operate)" class="loot" :disabled="one.operate.buttonState.loot.disabled" v-show="one.operate.buttonState.loot.show">{{$t('monitor.pickUp')}}</el-button>  <br>
        <el-button size="mini" type="text" @click="ctiUiKick(one.operate)" class="kick" :disabled="one.operate.buttonState.kick.disabled" v-show="one.operate.buttonState.kick.show">{{$t('monitor.checkOut')}}</el-button>  <br>
        <el-button size="mini" type="text" @click="ctiUiPick(one.operate)" class="pick" :disabled="one.operate.buttonState.pick.disabled" v-show="one.operate.buttonState.pick.show">{{$t('monitor.checkInPhone')}}</el-button>  <br>
        <el-button size="mini" type="text" @click="ctiUiPick(one.operate, 'gateway')" class="pickGateway" :disabled="one.operate.buttonState.pickGateway.disabled" v-show="one.operate.buttonState.pickGateway.show">{{$t('monitor.checkInSIP')}}</el-button>  <br>
      </div>
    </td>
  </tr>
</template>
<script>
  export default {
    name: 'monitor',
    data () {
      return {
        activeName: 'table'
      }
    },
    props: {
      one: {type: Object, default: function () { return {} }},
      monitorHeader: {type: Array, default: function () { return [] }}
    },
    methods: {
      ctiUiListen (data) {
        this.$emit('ctiUiListen', data)
      },
      ctiUiEndListen (data) {
        this.$emit('ctiUiEndListen', data)
      },
      ctiUiForceHangup (data) {
        this.$emit('ctiUiForceHangup', data)
      },
      ctiUiLoot (data) {
        this.$emit('ctiUiLoot', data)
      },
      ctiUiKick (data) {
        this.$emit('ctiUiKick', data)
      },
      ctiUiPick (data, type) {
        this.$emit('ctiUiPick', data, type)
      },
      filterVersion (type) {
        let typeName = ''
        let Packages = this.$getCache('licenceType')
        Packages.forEach((item)=>{
          if (type === item.code_value) {
            typeName = item.code_name
          }
        })
        return typeName
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl';
  td
    padding-left 18px
    padding-right 18px
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
    max-width 120px
  .agent
    max-width 120px
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .button-group
    display none
    position: absolute
    top: -20px
    right 35px
    z-index 1
    background-color $cf-white
    text-align center
    padding 0 10px
    border 1px solid #eee
  .operate
    position relative
    &:hover
      .button-group
        display: block

td.cdr-status-self
  &:before
    display inline-block
    width 10px
    height 10px
    border-radius 50%
    margin-right 5px
td.cdr-status-self.cdr-green
  &:before
    content ''
    background #a1e036
td.cdr-status-self.cdr-red
  &:before
    content ''
    background-color #ff6c65
td.cdr-status-self.cdr-orange
  &:before
    content ''
    background-color #f69222
</style>
